<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
    :dialogWidth='"60%"'
    :topHeight='"12vh"'
  >
    <div class="formarea">
      <el-form ref="addcarform" :model="addcarforms" :rules="rules" size="small" label-width="100px">
  <el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车牌号" prop="license_plate">
            <el-input v-model="addcarforms.license_plate" placeholder="请输入车牌号" clearable :style="{width: '92%'}">
            </el-input>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车辆用途" prop="use_type">
            <el-select v-model="addcarforms.use_type" placeholder="请选择车辆用途" clearable :style="{width: '92%'}">
              <el-option v-for="(item, index) in clytOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>

        </el-row>
      </el-col>
      <el-col :span="8">
          <el-form-item label="车辆图片" prop="picture">
              <uploadimg :imgModel='addcarforms.picture' @deleteimg='picturedel' class="uploaditem" @uploadimgok='pictureok'>
             <span slot="text">上传的图片大小不得超过10M</span>
            </uploadimg>
          </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车辆品牌" prop="vehicle_brand">
            <el-input v-model="addcarforms.vehicle_brand" placeholder="请输入车辆品牌" clearable :style="{width: '92%'}">
            </el-input>
          </el-form-item>

        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车型" prop="type">
            <el-select v-model="addcarforms.type" placeholder="请选择车型" clearable :style="{width: '92%'}">
              <el-option v-for="(item, index) in cartypeOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>

        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="" prop="field131">

          </el-form-item>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车辆颜色" prop="color">
            <el-select v-model="addcarforms.color" placeholder="请选择车辆颜色" clearable
              :style="{width: '92%'}">
              <el-option v-for="(item, index) in carcolorOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>

        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车辆类型" prop="vehicle_type">
            <el-select v-model="addcarforms.vehicle_type" placeholder="请选择车辆类型" clearable
              :style="{width: '92%'}">
              <el-option v-for="(item, index) in cartypesOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>

        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车辆状态" prop="vehicle_state">
            <el-select v-model="addcarforms.vehicle_state" placeholder="请选择车辆状态" clearable
              :style="{width: '92%'}">
              <el-option v-for="(item, index) in carstatusOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form-item label="关联机构" prop="team_id">
            <treeselect :style="{width: '92%'}" v-model="addcarforms.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
              placeholder="请选择关联机构" />
           <!-- <el-select v-model="addcarforms.school_id" placeholder="请选择校区" clearable :style="{width: '92%'}">
              <el-option v-for="(item, index) in xqOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disable"></el-option>
            </el-select> -->
          </el-form-item>
        </el-row>
      </el-col>

      <el-col :span="8">
        <el-row>
          <el-form-item label="关联教练" prop="coach">
            <!-- <el-select v-model="coach" placeholder="请在教练信息中进行教练关联"  clearable :style="{width: '92%'}">
              <el-option v-for="(item, index) in coachOptions" :key="index" :label="item"
                :value="item.id" :disabled="true"></el-option>
            </el-select> -->
            <el-input v-model="addcarforms.coach" placeholder="请在教练信息中进行教练关联" :disabled='true' clearable :style="{width: '92%'}"></el-input>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
         <el-form-item label="关联训练场" prop="train_place_id">
            <el-select v-model="addcarforms.train_place_id" placeholder="请选择训练场" clearable :style="{width: '92%'}">
              <el-option v-for="(item, index) in xlcOptions" :key="index" :label="item.title"
                :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-col>
    </el-row>
    <el-row>

      <el-col :span="8">
        <el-row>
           <el-form-item label="购买时间" prop="buy_time">
            <el-date-picker v-model="addcarforms.buy_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '92%'}" placeholder="请选择购买时间" clearable></el-date-picker>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
         <el-form-item label="生产厂家" prop="manufacturer">
            <el-input v-model="addcarforms.manufacturer" placeholder="请输入生产厂家" clearable :style="{width: '92%'}">
            </el-input>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="油气卡号" prop="oil_gas_number">
             <el-input v-model="addcarforms.oil_gas_number" placeholder="请输入油气卡号" clearable :style="{width: '92%'}"></el-input>
          </el-form-item>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form-item label="出厂时间" prop="shipping_time">
            <el-date-picker v-model="addcarforms.shipping_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '92%'}" placeholder="请选择出厂时间" clearable></el-date-picker>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="车架号" prop="ljnmdv_vin">
            <el-input v-model="addcarforms.ljnmdv_vin" placeholder="请输入车架号" clearable :style="{width: '92%'}">
            </el-input>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-form-item label="发动机号" prop="engine_no">
            <el-input v-model="addcarforms.engine_no" placeholder="请输入发动机号" clearable :style="{width: '92%'}">
            </el-input>
          </el-form-item>
        </el-row>
      </el-col>
    </el-row>
    <el-row>

      <el-col :span="8">
         <el-form-item label="经营方式" prop="belong_type">
          <el-radio-group v-model="addcarforms.belong_type" size="medium">
            <el-radio v-for="(item, index) in belong_typeOptions" :key="index" :label="item.value"
              :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>

    </el-row>
    <el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="addcarforms.remark" type="textarea" placeholder="请输入备注"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '97.5%'}"></el-input>
      </el-form-item>
    </el-row>
  </el-row>
</el-form>

    </div>
  </commonformdialog>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'
//地图弹窗组件
import mapDialog from '@/components/selectmap/selectmap'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
import {getSessionStorage} from '@/utils/accessToken'
//api
import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
import {createCar,editCarinfo,getreadInfo,getbmdOption}  from '@/api/car'
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      //是否禁用报名点
      isdisableenroll:false,
      addcarforms: {
        coach:'',
        belong_type:'',
        license_plate: '',
        type: '',
        picture: '',
        ljnmdv_vin: '',
        engine_no: '',
        manufacturer: '',
        vehicle_brand: '',
        vehicle_model: '',
        color: '',
        skill_level: '',
        buy_time: null,
        vehicle_state: '',
        vehicle_type: '',
        train_place_id: '',
        use_type: '',
        shipping_time: null,
        oil_gas_number: '',
        enroll_point_id: '',
        remark: '',
        team_id:null
      },
      rules: {

        team_id:[
          {
            required:false,
            message:'请选择关联教练',
            trigger:'change'
          }
        ],
        belong_type:[
          {
          required: true,
          message: '请选择经营方式',
          trigger: 'change'
        }
        ],
        license_plate: [{
          required: true,
          message: '请输入车牌号',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择车型',
          trigger: 'change'
        }],
        picture: [{
          required: true,
          message: '请上传图片',
          trigger: 'change'
        }],
        ljnmdv_vin: [{
          required: false,
          message: '请输入车架号',
          trigger: 'change'
        }],
        engine_no: [{
          required: false,
          message: '请输入发动机号',
          trigger: 'change'
        }],
        field131: [],
        manufacturer: [{
          required: false,
          message: '请输入生产厂家',
          trigger: 'change'
        }],
        vehicle_brand: [{
          required: true,
          message: '请输入车辆品牌',
          trigger: 'change'
        }],
        vehicle_model: [{
          required: true,
          message: '请输入车辆型号',
          trigger: 'change'
        }],
        color: [{
          required: true,
          message: '请选择车辆颜色',
          trigger: 'change'
        }],
        skill_level: [{
          required: true,
          message: '请选择技术等级',
          trigger: 'change'
        }],
        buy_time: [{
          required: false,
          message: '请选择购买时间',
          trigger: 'change'
        }],
        vehicle_state: [{
          required: true,
          message: '请选择车辆状态',
          trigger: 'change'
        }],
        vehicle_type: [{
          required: true,
          message: '请选择车辆类型',
          trigger: 'change'
        }],
        train_place_id: [{
          required: false,
          message: '请选择训练场',
          trigger: 'change'
        }],
        use_type: [{
          required: true,
          message: '请选择车辆用途',
          trigger: 'change'
        }],
        shipping_time: [{
          required: false,
          message: '请选择出厂时间',
          trigger: 'change'
        }],
        oil_gas_number: [{
          required: false,
          message: '请选择油气卡号',
          trigger: 'change'
        }],
        enroll_point_id: [{
          required: false,
          message: '请选择报名点',
          trigger: 'change'
        }],
        remark: [],
      },
      cartypeOptions: [],
      carcolorOptions: [],
      carartOptions: [],
      carstatusOptions: [],
      cartypesOptions: [],
      coachOptions:[],
      xlcOptions: [],
      clytOptions: [],
      qykhOptions: [],
      bmdOptions: [],
      xqOptions:[],
       belong_typeOptions: [{
        "label": "直营",
        "value": 1
      }, {
        "label": "加盟",
        "value": 2
      }],
        treeOptions: [],
    }
  },
  components: {
    commonformdialog,
    mapDialog,
    uploadimg,
    Treeselect
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType:{
      type:Number,
      default:0
    }
  },

  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      }
    },
    checkPermission,
    //删除图片
    picturedel(){
      this.addcarforms.picture = ''
    },
    //上传图片成功
    pictureok(imgUrl){
      this.addcarforms.picture = imgUrl
    },
    closeDialog() {
      this.$refs['addcarform'].resetFields()
      //重置表单
      this.$emit('closedialog')
    },
    //确认提交
    confirmbtn() {
      this.$refs['addcarform'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        if(this.formType == 0){
          //新增
          let data = await createCar(this.addcarforms)
          if(data.code == '0000'){
             this.$message({
            type: 'success',
            message: '新增成功!'
          });
          }
        }else{
          let {belong_type,id,team_id,license_plate,type,picture,ljnmdv_vin,engine_no,manufacturer,vehicle_brand,vehicle_model,color,skill_level,buy_time,vehicle_state,vehicle_type,train_place_id,use_type,shipping_time,oil_gas_number,enroll_point_id,remark} = this.addcarforms
          let params = {belong_type,id,team_id,license_plate,type,picture,ljnmdv_vin,engine_no,manufacturer,vehicle_brand,vehicle_model,color,skill_level,buy_time,vehicle_state,vehicle_type,train_place_id,use_type,shipping_time,oil_gas_number,enroll_point_id,remark}
          let data = await editCarinfo(params)
           this.$message({
            type: 'success',
            message: '编辑成功!'
          });
        }
        //清空数据
        this.$refs['addcarform'].resetFields()
        this.$emit('confirm')
      })
    },
    //用户选择地图
    selectmap() {

    },
    //关闭地图弹窗
    closemap() {

    },
    //用户确认选择地图
    affirmMap(params) {

    },
  },
  mounted(){

    //车型的数据
    this.cartypeOptions = getSessionStorage('Options')[1]
    //车辆颜色
    this.carcolorOptions = getSessionStorage('Options')[8]
    //技术等级
    this.carartOptions = getSessionStorage('Options')[9]
    //车辆状态
    this.carstatusOptions = getSessionStorage('Options')[10]
    //车辆类型
    this.cartypesOptions = getSessionStorage('Options')[11]
    //车辆用途
    this.clytOptions =getSessionStorage('Options')[12]
    //关联校区
    this.xqOptions = getSessionStorage('Optionsall')['school']
    //报名点
    this.bmdOptions = getSessionStorage('Optionsall')['enroll']
    //训练场
    this.xlcOptions = getSessionStorage('Optionsall')['train']
     this.treeOptions = getSessionStorage('Optionsall').team

     //编辑form
    this.$bus.on("editformcar",async (val)=>{
        //获取要编辑的id
        let id = val.id
        let data = await getreadInfo({id:id})
        this.addcarforms = data.data
        this.addcarforms.coach = data.data.coach
        this.addcarforms.use_type = data.data.use_type.value
        this.addcarforms.skill_level = data.data.skill_level.value
        this.addcarforms.train_place_id = data.data.train_place_id.value
        this.addcarforms.vehicle_type = data.data.vehicle_type.value
        this.addcarforms.vehicle_state = data.data.vehicle_state.value
        this.addcarforms.color = data.data.color.value
        this.addcarforms.team_id = data.data.team_id.value
        this.addcarforms.type = data.data.type.value
    });
  },
  destroyed(){
    this.$bus.off("editformcar")

  }

}
</script>

<style scoped lang='scss'>
::v-deep{
  .uploadimg{

  width: 100%;
  .el-form-item__content{

  width: 100%;
}
}

}
.formtips{
  font-size: 12px;
  color: rgba(0,0,0,0.4);
  margin-left: 100px;
}

  .uploaditem{
    position: absolute;
    left: 0;
    top: 0;
  }

</style>
